<template>
  <div class="video">
    <div class="timeOver">刷新倒计时：{{ time }}秒</div>
    <div class="up">
      <div class="test_name">
        <div class="shuiwei">
          <h3 class="cezhan">{{title}}</h3>
          <div class="dangqian">
            <span class="now_water">当前水位：</span>
            <span class="water_msg">
              {{device.waterLevel ==null?'':device.waterLevel}}
              <span class="danwei_cm">CM</span>
            </span>
          </div>
          <div class="jingjie">
            <span class="warn_water">警戒水位：</span>
            <span class="warn_msg">
              <el-input
                v-model="device.warningWater"
                size="mini"
                class="mycolor"
                maxlength="5"
                style="color:red"
                :placeholder="device.warningWater ==null?'':device.warningWater"
                @blur="warnWater"
              ></el-input>
              <span class="jinjie_cm">CM</span>
            </span>
          </div>
          <div class="jingjie">
            <span class="warn_water">警戒电压：</span>
            <span class="warn_msg">
              <el-input
                v-model="device.resultWarningVoltage"
                size="mini"
                class="mycolor"
                maxlength="5"
                style="color:red"
                :placeholder="device.waterLevel ==null?'':device.resultWarningVoltage"
                @blur="warnVoltage"
              ></el-input>
              <span class="jinjie_cm">V</span>
            </span>
          </div>
        </div>
        <div class="baojing">
          <h3 class="cezhan">状态信息</h3>
          <div class="shebei">
            <div class="dy">设备状态:</div>
            <div
              :class="device.waterOnlineStatus==1?'color green':'color red'"
            >{{device.waterOnlineStatus==1?'正常':'异常'}}</div>
            <!-- <div class="color" style="color:green">{{device.waterLevel ==null?'':'正常'}}</div> -->
          </div>
          <div class="zaixian">
            <div class="dy">在线状态:</div>
            <div
              :class="device.powerOnlineStatus==1?'color green':'color red'"
            >{{device.powerOnlineStatus==1?'在线':'离线'}}</div>
            <!-- <div class="color" style="color:green">{{device.waterLevel ==null?'':'在线'}}</div> -->
          </div>
          <div class="gaojing">
            <div class="dy">水位告警状态:</div>
            <div
              :class="device.waterWarningStatus==1?'green color':'red color'"
            >{{device.waterLevel ==null?'':device.waterWarningStatus==1?'正常':'告警'}}</div>
          </div>
          <div class="dianya">
            <div class="dy">电压告警状态:</div>
            <div
              :class="device.powerWarningStatus==1?'green color':'red color'"
            >{{device.waterLevel ==null?'':device.powerWarningStatus==1?'正常':'告警'}}</div>
          </div>
          <div class="dianya">
            <div class="dy">水位更新时间:</div>
            <div
              class="color"
              style="color:#000"
            >{{device.waterLevel ==null?'':device.waterLastOnlineTime}}</div>
          </div>
        </div>
      </div>

      <div class="video_s">
        <div class="listItem" v-for="(item,index) in valiPage" :key="index">
          <iframe
            frameborder="0"
            scrolling="no"
            :src="item.endTime"
            width="100%"
            height="100%"
            id="ysOpenDevice"
            allowfullscreen
          ></iframe>

          <div class="btnBox" v-if="btnShow">
            <div class="iicon" @click="btnShow=false">
              <img src="../../assets/png/closed.png" alt />
            </div>
            <div class="jujiao">
              <div class="yuanjiao" @click="changeVideo(11)">
                <img src="../../assets/png/yuanjiao.png" alt />
              </div>
              <div class="jinjiao" @click="changeVideo(10)">
                <img src="../../assets/png/jinjao.png" alt />
              </div>
            </div>
            <div class="yuan">
              <div class="shang" @click="changeVideo(0)">
                <img src="../../assets/png/shang.png" alt />
              </div>
              <div class="xia" @click="changeVideo(1)">
                <img src="../../assets/png/xia.png" alt />
              </div>
              <div class="zuo" @click="changeVideo(2)">
                <img src="../../assets/png/zuo.png" alt />
              </div>
              <div class="you" @click="changeVideo(3)">
                <img src="../../assets/png/you.png" alt />
              </div>
              <div class="zanting" @click="changeVideoStop(-1)">
                <img src="../../assets/png/zanting.png" alt />
              </div>
            </div>
            <div class="fangdasuoxiao">
              <div class="fangda" @click="changeVideo(8)">
                <img src="../../assets/png/fangda.png" alt />
              </div>
              <div class="suoxiao" @click="changeVideo(9)">
                <img src="../../assets/png/suoxiao.png" alt />
              </div>
            </div>
          </div>

          <div class="huchu" @click="getBtns">
            <img src="../../assets/png/huchu.png" alt />
          </div>
        </div>
      </div>
      <div class="test_info">
        <div class="sun_info">
          <div :style="{margin: '10px'}">
            <div class="title">太阳能信息</div>
          </div>
              
          <div>
            <span class="aaa">光伏电压：</span>
            <span class="ccc">{{device.solarVoltage ==null?0:device.solarVoltage/100}}(V)</span>
          </div>
          <div>
            <span class="aaa">光伏电流：</span>
            <span class="ccc">{{device.solarElectric ==null?0:device.solarElectric/100}}(A)</span>
          </div>
          <div>
            <span class="aaa">电池温度：</span>
            <span
              class="ccc"
            >{{device.batteryTemperature ==null?0:device.batteryTemperature/100}}(℃)</span>
          </div>
          <div>
            <span class="aaa">电池电压：</span>
            <span class="ccc">{{device.batteryVoltage ==null?0:device.batteryVoltage/100}}(V)</span>
          </div>
          <div>
            <span class="aaa">负载电流：</span>
            <span class="ccc">{{device.solarCurrent ==null?0:device.solarCurrent/100}}(A)</span>
          </div>
          <div>
            <span class="aaa">剩余电量：</span>
            <span class="ccc">{{device.batteryPower ==null?0:device.batteryPower}}(%)</span>
          </div>
          <div>
            <span class="aaa">太阳能更新时间：</span>
            <span
              class="ccc"
            >{{device.powerLastOnlineTime ==null?"未连接系统":device.powerLastOnlineTime}}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="search">
      <div class="data_query">
        <el-form :inline="true" :model="search">
          <el-form-item v-if="typeTiem" label="日期选择">
            <el-date-picker
              v-model="search.time"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>

          <el-form-item v-else label="时间选择">
            <el-date-picker
              v-model="search.time"
              type="datetime"
              placeholder="任意时间点"
              value-format="yyyy-MM-dd HH"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="报表类型">
            <el-select v-model="table_data" placeholder @change="typeChange(table_data)">
              <el-option label="日报表" value="day"></el-option>
              <el-option label="时报表" value="hour"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getAddBook">查询</el-button>
            <el-button @click="empty" type="info">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div class="charts">
      <div id="ehart1" ref="ehart1" :style="{width: '100%', height: '100%'}"></div>
    </div>
  </div>
</template>
<script>
import { getTimeSeconds } from "../../utils/myMethod";
import { getTimeHourMinutes } from "../../utils/myMethod";
import { setTimeout } from "timers";

export default {
  name: "commonvideo",
  props: {
    title: {
      type: String,
      default: ""
    },
    valiPage: {
      type: Array,
      default: () => {}
    },
    device: {
      type: Object,
      default: () => {}
    },
    deviceserial: {
      type: String,
      default: ""
    },
    accessToken: {
      type: String,
      default: ""
    },
    addressCode: {
      type: String,
      default: ""
    }
  },

  data() {
    return {
      pageNumber: [1, 2],
      level: {
        line: ""
      },
      value: 300,
      time: 60,
      timer: null,
      noData: false,
      typeTiem: true,
      // valiPage: [],
      // valiList: [],

      speed: 1,
      index: 0,
      table_data: "day",
      btnShow: false,
      waterEquipmentList: [],
      search: {
        time: getTimeSeconds(new Date())
      },
      count: [],
      end: 40,
      data: {
        pagesize: 10,
        currpage: 1,
        list: []
      },
      dataX: [],
      dataY: []
    };
  },

  created() {
    this.getList();
  },
  mounted() {
    this.$nextTick(() => {
      this.postTime();
    });
  },

  methods: {
    postTime() {
      this.time = 60;
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        if (this.time <= 0) {
          this.getList();
          this.time = 61;
        }
        this.time--;
      }, 1000);
    },
    getBtns() {
      this.btnShow = true;
    },
    typeChange(value) {
      if (value === "day") {
        this.typeTiem = true;
        this.search.time = getTimeSeconds(new Date());
      } else {
        this.typeTiem = false;
        this.search.time = getTimeHourMinutes(new Date());
        debugger;
      }
    },
    //视频切换
    changeVideo(index) {
      this.getVideoAbility(index, this.speed);
    },
    // 视频停止
    changeVideoStop(speed) {
      this.getVideoAbility(this.index, speed);
    },
    getVideoAbility(index, speed) {
      this.$http
        .post("deviceCamera/changeLocation", {
          accessToken: this.accessToken,
          cameraNumber: this.deviceserial,
          channelNumber: 1,
          direction: index,
          speed: speed
        })
        .then(res => {
          this.index = index;
          // setTimeout(() => {
          //   this.changeVideoStop(-1);
          // }, 2000);
        });
    },

    // 根据水位站列表点击查询当前水位站视频
    queryVideoList(id) {},
    //获取列表数据
    getList() {
      let _this = this;
      let time = "";
      if (_this.typeTiem) {
        time = _this.search.time;
      } else {
        // time = getTimeHourMinutes(_this.search.time) + ":00:00";
        time = _this.search.time + ":00:00";
      }
      setTimeout(() => {
        let dateType = "";

        _this.$http
          .post("dataMsg/getAllWaterDetail", {
            time,
            dateType: _this.table_data,
            stationId: _this.device.stationId
          })
          .then(res => {
            if (res.data.length > 0) {
              this.drawLine(res.data[0] && res.data[0].dataMsgs);
            } else {
              this.drawLine([]);
              this.$message({
                showClose: true,
                message: "报表暂无数据"
              });
              return;
            }
          });
      }, 1000);
    },

    drawLine(res) {
      // res = res || [];
      let arr = [];
      let time = [];
      let title = {};
      let count = 0;
      let list = [];
      res.forEach(element => {
        arr.push(element.waterLevel);
        time.push(element.createTime);
        count = time.length;
      });
      for (let i = 1; i <= count; i++) {
        list.push(i);
      }
      this.count = list;
      if (count > 1000) {
        this.end = 5;
      } else if (count > 100 && count < 1000) {
        this.end = 10;
      } else {
        this.end = 40;
      }
      let series = [];

      series.push({
        name: this.device.stationName,
        time: time,
        data: arr,
        type: "line",
        smooth: true,
        itemStyle: {
          normal: {
            // color: "#4285F4", // 柱状图颜色
            label: {
              show: false, //开启显示
              position: "top", //在上方显示
              textStyle: {
                //数值样式
                color: "blue",
                fontSize: 14
              }
            }
          }
        }
      });
      let myChart = this.$Echarts.init(document.getElementById("ehart1"));
      // 指定图表的配置项和数据
      let option = {
        title: title,
        color: ["#347fff"],
        backgroundColor: "#ffffff", //整体背景色
        tooltip: {
          trigger: "item",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            align: "left"
          },
          formatter: function(params) {
            // var res = "<div><p>" + params.seriesName + "</p></div>";
            var res = "<div><p>" + params.seriesName + "</p></div>";

            // for(var i=0;i<params.length;i++){
            // res+='<p>'+params[i].seriesName+':'+params[i].data+'</p>'
            // }
            res += "<p>当前水位:" + params.data + "CM</p>";
            res +=
              "<p>更新时间:" +
              option.series[params.seriesIndex].time[params.dataIndex] +
              "</p>";
            return res;
          }
        },
        grid: {
          top: 14,
          left: 14,
          right: 16,
          bottom: 16,
          containLabel: true
        },
        xAxis: {
          type: "category",
          // data: this.dataX,
          data: this.count,
          show: false,
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#DFE3E9", // x轴颜色
              // color: "#347fff", // x轴颜色
              width: 1 // 粗细
            }
          },
          axisLabel: {
            color: "#999999", // x轴刻度名称颜色
            interval: 0 //代表显示所有x轴标签显示
            // rotate:45, //代表逆时针旋转45度
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed"
            }
          },
          axisLabel: {
            // color: "#999999", // y轴刻度名称颜色
            formatter: function(value) {
              var value;
              if (value >= 1000) {
                value = value / 1000 + "K";
              } else if (value < 1000) {
                value = value;
              }
              return value;
            }
          },
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴
            show: false
          }
        },
        series: series,
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: 0,
            filterMode: "empty",
            start: 0, //数据窗口范围的起始百分比,表示30%
            end: this.end
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    //查询
    getAddBook() {
      this.getList();
    },
    // 修改警戒水位
    warnWater() {
      let that = this;
      let reg = /^[1-9]\d*$/;
      let wn = that.device.warningWater;
      let code = that.device.deviceCode;
      if (reg.test(wn)) {
        that.$http
          .post("deviceWater/updateWater", {
            code: code,
            companyId: localStorage.getItem("companyId"),
            waringNum: wn
          })
          .then(res => {
            this.$message({
              message: res.message,
              type: "success",
              center: true
            });
          });
      } else {
        this.$message({
          message: "请输入合适的水位值",
          type: "error",
          center: true
        });
      }
    },
    // 修改警戒电压
    warnVoltage() {
      let that = this;
      let reg = /^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,8}\.\d{0,2}$|^[1-9]\d{0,8}$/;

      let wn = that.device.resultWarningVoltage;
      let code = that.device.devicePowerCode;
      debugger;
      console.log(reg.test(wn));
      if (reg.test(wn)) {
        that.$http
          .post("devicePower/updatePower", {
            code: code,
            companyId: localStorage.getItem("companyId"),
            waringNum: wn
          })
          .then(res => {
            this.$message({
              message: res.message,
              type: "success",
              center: true
            });
          });
      } else {
        this.$message({
          message: "请输入合适的警戒电压值",
          type: "error",
          center: true
        });
      }
      // that.$http
      //   .post("devicePower/updatePower", {
      //     code: code,
      //     companyId: localStorage.getItem("companyId"),
      //     waringNum: wn
      //   })
      //   .then(res => {
      //     this.$message({
      //       message: res.message,
      //       type: "success",
      //       center: true
      //     });
      //   });
    },
    //重置
    empty() {
      this.search = {
        time: getTimeSeconds(new Date())
      };
      this.noData = false;
      this.typeTiem = true;
      this.table_data = "day";
      this.getList();
    },
    // 翻页
    nextpage(value) {
      this.data.currpage = value;
    },
    // 显示条数切换
    sizeChange(total) {
      this.data.pagesize = total;
    }
  },
  destroyed() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>
<style lang="less" scoped>
.red {
  color: red;
  width: 50%;
  text-align: left;
}
.green {
  color: green;
  width: 50%;
  text-align: left;
}
.video {
  width: 100%;
  height: 100%;
  .mycolor /deep/ .el-input__inner {
    color: red;
  }
}
.timeOver {
  z-index: 9999;
  position: absolute;
  left: 15px;
  top: 15px;
  font-size: 16px;
  height: 32px;
  line-height: 32px;
}
.up {
  width: 100%;
  height: 58%;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  .test_name {
    width: 367px;
    height: 100%;
    background: url("../../assets/png/swbg.png") center no-repeat;
    background-size: contain;
    border-radius: 4px;
    .shuiwei {
      box-sizing: border-box;
      width: 100%;
      height: 35%;
      .cezhan {
        margin: 10px 0;
        font-size: 20px;
        font-weight: 600;
      }
      .dangqian {
        display: flex;
        height: 40px;
        line-height: 40px;
        justify-content: center;
        align-items: center;
        .now_water {
          width: 50%;
          font-size: 16px;
          height: 100%;
          text-align: right;
        }
        .water_msg {
          width: 50%;
          height: 100%;
          text-align: left;
          border-radius: 4px;
          font-weight: 600;
          color: rgba(18, 145, 27, 1);

          position: relative;
          left: 15px;
          .danwei_cm {
            font-weight: 600;
            position: relative;
            left: 28px;
          }
        }
      }
      .jingjie {
        display: flex;
        height: 40px;
        line-height: 40px;
        justify-content: space-around;
        align-items: center;
        .warn_water {
          width: 50%;
          font-size: 16px;
          height: 100%;
          line-height: 35px;
          text-align: right;
        }
        .warn_msg {
          width: 50%;
          height: 100%;
          text-align: left;
          .el-input {
            border-radius: 4px;
            width: 70px;
            height: 35px;
            line-height: 35px;
          }
          .jinjie_cm {
            font-weight: 600;
          }
        }
      }
    }
    .baojing {
      box-sizing: border-box;
      width: 100%;
      height: 65%;
      .cezhan {
        font-size: 20px;
        font-weight: 600;
      }
      .shebei,
      .zaixian,
      .gaojing,
      .dianya {
        display: flex;
        height: 50px;
        line-height: 50px;
        justify-content: center;
        align-items: center;

        .dy {
          width: 45%;
          font-size: 16px;
          text-align: right;
          // margin: 0 20px;
          color: rgba(51, 51, 51, 1);
        }
        .color {
          width: 55%;
          text-align: center;
          padding-right: 20px;
          // color: rgba(18, 145, 27, 1);
        }
      }
    }
  }
  .video_s {
    flex: 1;
    height: 100%;
    background: rgba(94, 94, 94, 1);
    .listItem {
      width: 100%;
      position: relative;
      height: 100%;
      .btnBox {
        position: absolute;
        top: 50%;
        right: 0;
        width: 200px;
        height: 80%;
        padding: 32px;
        background: rgba(5, 29, 70, 0.2);
        // opacity: 0.2;
        transform: translateY(-50%);
        border-radius: 8px;
        .iicon {
          position: absolute;
          width: 26px;
          height: 26px;
          top: 0;
          left: 0;
          cursor: pointer;
          img {
            width: 100%;
          }
        }
        .jujiao {
          width: 200px;
          height: 80px;
          // background-color: aquamarine;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .yuanjiao {
            width: 31px;
            height: 31px;
            cursor: pointer;
            img {
              width: 31px;
              height: 31px;
            }
          }
          .jinjiao {
            width: 31px;
            height: 31px;
            cursor: pointer;
            img {
              width: 31px;
              height: 31px;
            }
          }
        }
        .yuan {
          width: 160px;
          height: 160px;
          background: url("../../assets/png/dayuan.png") center center no-repeat;
          background-size: contain;
          position: relative;
          top: 30%;
          left: 50%;
          transform: translate(-50%, -50%);
          .zanting {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            img {
              width: 100%;
            }
          }
          .shang {
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 20px;
            top: 10px;
            left: 50%;
            transform: translate(-50%, 0);
            img {
              width: 100%;
            }
          }
          .xia {
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 20px;
            bottom: 10px;
            left: 50%;
            transform: translate(-50%, 0);
            img {
              width: 100%;
            }
          }
          .zuo {
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 20px;
            top: 50%;
            left: 10px;
            transform: translate(0, -50%);
            img {
              width: 100%;
            }
          }
          .you {
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 20px;
            top: 50%;
            right: 10px;
            transform: translate(0, -50%);
            img {
              width: 100%;
            }
          }
        }
        .fangdasuoxiao {
          width: 200px;
          height: 80px;
          // background-color: rgb(73, 207, 248);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .fangda {
            width: 31px;
            height: 31px;
            cursor: pointer;
            img {
              width: 31px;
              height: 31px;
            }
          }
          .suoxiao {
            width: 31px;
            height: 31px;
            cursor: pointer;
            img {
              width: 31px;
              height: 31px;
            }
          }
        }
      }
      .huchu {
        position: absolute;
        width: 20px;
        height: 20px;
        // background-color: #444;
        bottom: 15px;
        left: 10px;
        cursor: pointer;
        img {
          width: 100%;
        }
      }
      .btns {
        position: absolute;
        width: 90px;
        height: 90px;
        background-color: #444;
        bottom: 0;
        left: 0;
        .jiugongge {
          ul {
            display: flex;
            box-sizing: border-box;
            flex-wrap: wrap;
            align-items: center;
            li {
              width: 30px;
              height: 30px;
              cursor: pointer;
              list-style: none;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                height: 20px;
                width: 20px;
              }
            }
            .hide {
              opacity: 0;
            }
          }
        }
      }
      .fdsx {
        position: absolute;
        display: flex;
        width: 200px;
        height: 30px;
        bottom: 10px;
        cursor: pointer;
        left: 90px;
        .item {
          width: 30px;
          height: 30px;
          margin: 0 10px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .test_info {
    width: 367px;
    height: 100%;
    background: url("../../assets/png/swbg.png") center no-repeat;
    background-size: contain;
    border-radius: 4px;

    .sun_info {
      width: 100%;
      height: 100%;
      div {
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: center;
        padding: 0 30px;
        // align-items: center;

        .title {
          font-family: PingFang SC;
          font-weight: 600;
          color: rgba(51, 51, 51, 1);

          font-size: 20px;
        }
        .aaa {
          font-size: 16px;
          font-weight: 500;
          width: 50%;
          color: rgba(51, 51, 51, 1);
          // padding-left: 30px;
        }
        .ccc {
          width: 50%;
          color: rgba(49, 49, 49, 0.54);
          // padding-right: 30px;
        }
      }
    }
  }
}
.search {
  width: 100%;
  height: 12%;
  position: relative;
  .data_query {
    position: absolute;
    line-height: 10px;
    top: 20px;
    left: 0;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
  }
}
.charts {
  width: 100%;
  height: 26%;
  margin-bottom: 1%;
  // overflow: hidden;
  .noData {
    font-size: 26px;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
}
</style>

